<template>
  <div class="app_Setting horizontalFlex">
    <el-icon @click="drawer = true"><setting /></el-icon>

    <el-drawer v-model="drawer" :show-close="false" :size="state.isMobile ? '80%' : 420" :with-header="false">
      <el-scrollbar class="setting_drawer">
        <div class="form_area" v-for="setting in settingList" :key="setting.title">
          <div class="form_area_title">{{ setting.title }}</div>
          <div class="setting_form_item" :class="{ block: config.slider }" v-for="config in setting.configList" :key="config.prop">
            <div class="el-form-item__label">{{ config.name }}</div>
            <div class="el-form-item__content">
              <template v-if="config.slider">
                <el-slider v-model="form[config.prop]" :min="config.scope[0]" :max="config.scope[1]" @change="handleConfigChange($event, config)"/>
                <span style="margin-left: 20px;">{{ form[config.prop] }}</span>
              </template>
              <el-color-picker v-else-if="config.colorPicker" v-model="form[config.prop]" :predefine="colors" @change="handleConfigChange($event, config)"/>
              <el-switch v-model="form[config.prop]" v-else @change='handleConfigChange($event, config)'/>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { Setting } from "@element-plus/icons-vue";
import { settingOption,predefineColors } from "./settingOptions";
import { ref, toRaw } from "vue";
import { useStore } from "vuex";

const store = useStore();
const state = store.state;
const form = ref(toRaw(state.setting));
const drawer = ref(false);
// 配置项
const settingList = ref(settingOption);
const colors = ref(predefineColors);
// const form = ref({ ...state.setting })
const handleConfigChange = (val: any, config: any) => {
  // console.log(val, config)
  let par:any = {};
  par[config.prop] = val;
  store.commit('updateSetting', par);
};
</script>

<style scoped lang="scss">
.app_Setting {
  height: 100%;
  .el-icon{
    cursor: pointer;
  }
  .setting_drawer{
    padding: var(--el-drawer-padding-primary);
    .form_area{
      width: 100%;
      padding: 10px 20px;
      border-radius: 8px;
      background-color: rgba(0,0,0,.03);
      margin-top: 30px;
      &:first-child{
        margin-top: 0;
      }
      .form_area_title{
        font-size: 20px;
        margin-bottom: 10px;
        font-weight: 800;
      }
    }
    .setting_form_item{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
      &.block{
        margin: 10px 0;
        flex-direction: column;
        .el-form-item__content{
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
</style>